<template>
  <div class="information">
    <!-- tit -->
    <div class="tit">
      <h2>资讯中心</h2>
      <p>分享行业观点和资讯，助您了解行业及公司最新动态</p>
    </div>
    <!-- con -->
    <div class="con">
      <!-- 左侧盒子 -->
      <div class="con-left">
        <div
          class="con-left-item"
          v-for="item in messageLeft"
          :key="item"
        >
          <a>{{ item }}</a>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="con-right">
        <div
          class="con-right-item"
          v-for="item in messageRight"
          :key="item"
        >
          <a>{{ item }}</a>
        </div>
      </div>
    </div>
    <!-- btn -->
    <div class="btn" @click="newsClick('/news/gsdt')">查看更多</div>
  </div>
</template>

<script>
export default {
  name: "Information",
  data() {
    return {
      messageLeft: [
        "2021-10-15 | 【公司动态】河南省委宣传部相关领导莅临我单位承建的开封西湖街道办事处指导工作",
        "2021-09-30 | 【公司动态】【欢度佳节】一诺万金公司祝大家国庆快乐！",
        "2021-09-22 | 【公司动态】【 邀请函 】一诺万金渠道伙伴交流会",
        "2021-09-21 | 【公司动态】【共度佳节】一诺万金公司祝大家中秋快乐！"
      ],
      messageRight: [
        "2021-10-18 | 【行业动态】构建网格化平台、打造社区服务管理新格局",
        "2021-09-28 | 【行业动态】陈金銮调研智慧社区建设工作：打造智慧社区梅江样板",
        "2021-09-25 | 【行业动态】1+1+4+N  总架构，珠海发布 十四五 智慧城市规划",
        "2021-09-17 | 【行业动态】浙江嘉兴：打造嘉兴样板，让居民生活智慧＋"
      ]
    }
  },
  methods: {
    newsClick(path) {
      this.$router.push(path);
    }
  }
}
</script>

<style>
  .information {
    width: 62.5%;
    margin: 40px auto;
    text-align: center;
  }

  .information .tit {
    margin-bottom: 24px;
  }

  .information .tit h2 {
    font-size: 36px;
    font-weight: 1000;
    color: #333;
  }

  .information .tit p {
    font-size: 16px;
    color: #666;
  }

  /* 内容 */
  .information .con {
    display: flex;
    text-align: left;
    justify-content: space-between;
  }

  .information .con .con-left,
  .information .con .con-right {
    font-size: 16px;
    width: 48.33%;
    background-color: #fff;
    padding: 24px;
    /* 投影 */
    box-shadow: 0 0 10px #f5f5f5;
  }

  .information .con .con-left .con-left-item,
  .information .con .con-right .con-right-item {
    padding: 8px 0;
    /* 段落文本不换行 */
    white-space: nowrap;
    /* 超出边框隐藏 */
    overflow: hidden;
    /* 超出文本省略号展示 */
    text-overflow: ellipsis;
  }

  /* hover状态 */
  .information .con .con-left:hover,
  .information .con .con-right:hover {
    /* 设置鼠标滑过的鼠标形状为小手 */
    cursor: pointer;
    /* 设置动画时长 */
    transition-duration: 0.3s;
    /* 设置悬停向上移动5px */
    transform: translateY(-5px);
  }

  .btn {
    width: 88px;
    height: 32px;
    border: 1px solid #999;
    border-radius: 4px;
    text-align: center;
    color: #333;
    line-height: 32px;
    margin: 24px auto;
  }

  .btn:hover {
    background-color: #1890ff;
    color: #fff;
    border: none;
    cursor: pointer;
  }

</style>